
<template>
  <div class="bigBox">
    <!-- <div class="fixed">6666</div>
     -->

    <div class="TestContainer" ref="notesbox" @scroll="addData">
      <div class="fall">
        <waterfall
          :col="2"
          :width="
            (W -
              ((W < 500 && W >= 400 ? 400 : W >= 500 ? 500 : W) / 375) *
                12 *
                2 -
              ((W < 500 && W >= 400 ? 400 : W >= 500 ? 500 : W) / 375) * 12) /
            2
          "
          :gutterWidth="
            ((W < 500 && W >= 400 ? 400 : W >= 500 ? 500 : W) / 375) * 12
          "
          :data="data"
        >
          <div
            class="box"
            v-for="item in data"
            :key="item.id"
            @click="goImg(item.picture)"
          >
            <img :src="item.img_url" alt="" />
            <div class="content">
              <div>{{ getLength(item.content) }}</div>
              <div>{{ item.user.user_name }}</div>
              <div>{{ item.input_date }}</div>
            </div>
          </div>
        </waterfall>
      </div>
    </div>
  </div>
</template>
<script>
import { getNotes } from "@/api/find";
export default {
  name: "Notes",
  components: {},
  data() {
    return {
      W: document.body.clientWidth || document.documentElement.clientWidth,
      data: [],
      timer: null,
      show: false,
    };
  },
  created() {
    this.getNotesData();
  },
  methods: {
    goImg(img) {
      this.$router.push({
        path: "/notesContent",
        query: {
          img: JSON.stringify(img),
        },
      });
    },
    async getNotesData() {
      const { data } = await getNotes(0);
      this.data = data.list;
      console.log("小计数据", this.data);
    },
    // 上滑加载方法
    addData() {
      //scrollTop就是触发滚轮事件时滚轮的高度
      // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let scrollTop = this.$refs.notesbox.scrollTop;
      let scrollHeight = this.$refs.notesbox.scrollHeight; //滚动条的高度
      let clientHeight = this.$refs.notesbox.clientHeight; //浏览器的可视高度
      console.log("scrollTop", scrollTop);
      console.log("浏览器的可视高度", clientHeight);
      console.log(
        "滚动条高度",
        scrollHeight,
        "浏览器可视高度",
        scrollTop + clientHeight + 100
      );
      if (scrollTop + clientHeight >= scrollHeight) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.getLoading();
        }, 1500);
        console.log("触底");
      }
    },
    async getLoading() {
      console.log("加载", this.data[this.data.length - 1].id);
      const { data } = await getNotes(this.data[this.data.length - 1].id);
      console.log("获取数据", data.list);
      this.data.push(...data.list);
    },
    // 处理字数长度的方法
    getLength(str) {
      if (str.length > 25) {
        return str.substr(0, 18) + "...";
      } else {
        return str;
      }
    },
  },
};
</script>

<style lang="less" >
.bigBox {
  .fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: pink;
    z-index: 1000;
  }
}

.TestContainer {
  margin: 0 auto;
  width: 100%;
  max-height: 667px;
  overflow: scroll;
  column-fill: balance;
  background: #fcfcfc;
  /* column-count: 3; */
  /* column-gap: 1; */
  .fall {
    padding: 0px 10px 100px 10px;

    .box {
      width: 100%;
      margin-bottom: 10px;
      background: #ffffff;
      border-radius: 10px;
      outline: solid;
      outline-width: 1px;
      outline-color: #e6e6e6;
      box-sizing: border-box;

      img {
        width: 100%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      .content {
        padding: 10px;
        & > :nth-child(1) {
          font-size: 14px;
          color: #000;
        }
        & > :nth-child(2) {
          font-size: 10px;
          color: #c4c4c4;
        }
        & > :nth-child(3) {
          font-size: 10px;
          color: #c4c4c4;
        }
      }
    }
  }
}

img {
  width: 100%;
}
</style>